import { ErrorBlock, Image, List, PullToRefresh, Space } from 'antd-mobile';
import { postManagerGetProducts } from '@/api/manager';
import Loading from '@/components/loading';
import { useRequest } from 'ahooks';

export default function ProudctPage(){
    const { data = [], loading, run: runList } = useRequest(
        () => postManagerGetProducts({ productIds: [] }),
    );
    const onFresh = async() => {
        runList();
    }
    return(
        <Loading loading={loading}>
            <div className="body">
                <PullToRefresh onRefresh={onFresh}>
                    {data.length > 0 && (
                        <List>
                            {data.map(item => (
                                <List.Item
                                    key={item.productId}
                                    prefix={
                                        <Image
                                            src={`/${item.productId}.jpg`}
                                            fit='cover'
                                            width={80}
                                            height={80}
                                        />
                                    }
                                    description={
                                        <>
                                            <div style={{color:'var(--adm-color-primary)'}}>有货时间： {item.createTime}</div>
                                        </>
                                    }
                                >
                                    {item.productName}
                                </List.Item>
                            ))}
                        </List>
                    )}
                    {data.length ==0 && <ErrorBlock status='default' title="暂无数据" description='下拉刷新试试' />}
                </PullToRefresh>
            </div>
        </Loading>
    )
}